<template>
<div>
  <button @click="isShow=!isShow">显示0隐藏</button>
  <transition name="hello" :appear="true">
    <h1 v-show="isShow" >你好呀</h1>
  </transition>
</div>
</template>

<script>
export default {
  name: "Test",
  data(){
    return{
      isShow:true
    }
  }

}
</script>

<style scoped>
h1{
  background: #0d87e7;
}

.hello-enter-active{
  animation: yangguang 1s ;
}
.hello-leave-active{
  animation: yangguang 1s  reverse;
}

@keyframes yangguang {
  from{
    transform: translateX(-100%);
  }
  to{
    transform: translateX(0px);
  }
}
</style>